<script lang="ts" setup>
import { useSystemStore } from '@/store/system'

defineOptions({
  name: 'ApprovalStatusTag',
  title: '审批状态标签',
})
// 传入审批状态
defineProps({
  value: {
    type: Number,
    default: 0,
  },
  type: {
    type: String,
    default: 'tag',
  },
  color: {
    type: String,
    default: '#333333',
  },
})

const { bpmTaskStatusDict, fetchBpmTaskStatusDict } = useSystemStore()
// 定义审批状态颜色映射

const approvalStatusColorMap = {
  1: '#1890FF', // 待审批
  0: '#FAAD14', // 审批中
  2: '#16a34a', // 审批通过
  3: '#dc2626', // 审批不通过
  4: '#9ca3af', // 已取消
  5: '#F5222D', // 已退回
  6: '#FA8C16', // 委派中
  7: '#1890FF', // 审批通过中
}

// 根据系统中存储的审批状态字典和传入的value值，返回对应的名称
function getApprovalStatusName(value: number) {
  const dict = bpmTaskStatusDict || []
  const item = dict.find(item => Number(item.value) === value)
  console.log('item', item)
  return item?.title || ''
}
// 计算状态图标
function getStatusIcon(status: string | number) {
  // 统一转换为字符串进行比较，增强容错性
  const statusStr = String(status)

  switch (statusStr) {
    case '0': // 待审批
      return 'i-solar:history-2-bold'
    case '1': // 审批中
      return 'i-solar:refresh-circle-broken'
    case '2': // 审批通过
      return 'i-solar:check-circle-broken'
    case '3': // 审批不通过
      return 'i-solar:close-circle-broken'
    case '4': // 已取消
      return 'i-solar:danger-circle-broken'
    case '5': // 已退回
      return 'i-solar:history-broken'
    case '6': // 委派中
      return 'i-solar:chat-round-check-broken'
    case '7': // 审批通过中
      return 'i-solar:alarm-play-broken'
    default:
      return 'i-solar:history-2-bold'
  }
}
onMounted(() => {
  // 判断字典是否为空，为空需要重新获取
  if (!bpmTaskStatusDict?.length) {
    fetchBpmTaskStatusDict()
  }
})
</script>

<template>
  <view v-if="type === 'icon'" class="relative flex flex-shrink-0 items-center justify-center">
    <view
      class="h-5 w-5 flex items-center justify-center border-2 rounded-full text-4 font-medium"
      :style="{ backgroundColor: `${approvalStatusColorMap[value] || '#000000'}30`, borderColor: `${approvalStatusColorMap[value] || '#000000'}`, color: approvalStatusColorMap[value] || '#000000' }"
    >
      <i :class="getStatusIcon(value)" />
    </view>
  </view>
  <text
    v-else-if="type === 'tag'"
    class="rounded-full px-2 py-1 text-xs"
    :style="{ backgroundColor: `${approvalStatusColorMap[value] || '#000000'}30`, color: approvalStatusColorMap[value] || '#000000' }"
  >
    {{ getApprovalStatusName(value) }}
  </text>
  <text
    v-else-if="type === 'color'"
    class="rounded-full px-2 py-1 text-xs"
    :style="{ color: approvalStatusColorMap[value] || '#000000' }"
  >
    {{ getApprovalStatusName(value) }}
  </text>
  <text
    v-else
    class="rounded-full px-2 py-1 text-xs"
    :style="{ color }"
  >
    {{ getApprovalStatusName(value) }}
  </text>
</template>

<style lang="scss" scoped>
//
</style>
